<template>
	<view class="layout">
		<view class="margin-0">
			<view class="phone-width">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft107"
					style="width: 100%;">
					<view class="cu-item" :class="index==TabCur107?'text-green cur':''" v-for="(item,index) in 10" :key="index"
						@tap="tabSelect" :data-id="index">Tab{{index}} </view>
				</scroll-view>
			</view>

		</view>



		<view v-if="TabCur107 === 1" style="height:20vh; width:20vw;">
			<myMap ref="myMap" :points="points"></myMap>

			<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
				<view class="icon-btn">
					<view class="icon-btn-item" @click="pauseRun()">
						<u-icon size="34" class="red" name="home-fill"></u-icon>
						<view class="red icon-btn-name">暂停</view>
					</view>
					<view class="icon-btn-item" @click="startRun()">
						<u-icon size="34" class="red" name="home-fill"></u-icon>
						<view class="red icon-btn-name">开始跑步</view>
					</view>
					<view class="icon-btn-item" @click="stopRun()">
						<u-icon size="34" name="kefu-ermai"></u-icon>
						<view class="icon-btn-name">结束</view>
					</view>
				</view>
			</view>
		</view>


		<view v-if="TabCur107===0">
			<view class="margin-0" style="margin:7rpx 12rpx 12rpx 12rpx;">
				<swiper class="screen-swiper square-dot" style="margin:-1rpx;" :indicator-dots="true" :circular="true"
					:autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList106" :key="index">
						<image :src="item.url" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-cell-title">
				<view class="goods-item-title selected-title">
					<h4 class="h4">活动</h4>
					<view>描述</view>
				</view>
			</view>


			<view class="goods-list">
				<view class="goods-item" v-for="item in activateList" :key="item.ID" @click="changePage(item.ID,item.state)">
					<!-- <view class="goods-img"> -->
					<!-- 实际图片 -->
					<image class="goods-img" :src="item.url" mode="aspectFill"></image>
					<!-- 骨架屏 -->
					<!-- <view v-if="!imageLoaded" style="height: 350rpx; background-color: #eee;"></view> -->
					<!-- </view> -->
					<view class="goods-desc">
						<view class="goods-title">{{ item.title }}</view>
						<view class="goods-bottom">
							<view class="goods-price">
								<view>{{item.clickNumber}}</view>
								<view>{{item.starttime}}-{{item.endtime}}</view>
								<span v-if="item.state">正在进行</span>
								<span v-else>已结束</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import myMap from "./map.vue"
	import {
		testSend
	} from '@/api/activate.js'
	export default {
		// mixins: [onShareAppMessage],
		components: {
			myMap
		},
		name: "index",
		data() {
			return {
				switchGPS: false,
				starttime: undefined,
				endtime: undefined,
				clickNumber: undefined,
				share: {
					// title: this.share.title,
					// path: this.share.path,
					// imageUrl: this.share.imageUrl,
					// desc: this.share.desc,
					// content: this.share.content,
				},

				points: [],
				activateList: [],
				// imageLoaded: false,

				TabCur107: 0,
				scrollLeft107: 0,
				swiperList106: [{
					id: 0,
					type: 'image',
					url: 'https://img.zcool.cn/community/01cbe85c20c77fa8012029ac3c0e1c.jpg@2o.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				cuIconList108: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				gridCol108: 3,
				gridBorder108: false,


			}
		},
		mounted() {},
		onUnload() {
			uni.reLaunch({
				"url": "/pages/index/index"
			});
			// console.log("hedojasjkod")
		},
		onShow() {
			console.log("============")
			let userInfo = this.$store.state;
			testSend(userInfo).then(res => {
				if (res.statusCode === 200 && res.data.code === 0) {
					this.activateList = res.data.data.list

					this.activateList.forEach((item) => {
						let splite_start = new Date(item.starttime).toLocaleString('zh-CN', {
							hour12: false
						}).split('/');
						item.starttime = splite_start[1] + "." + splite_start[2].split(" ")[0]
						let splite_end = new Date(item.endtime).toLocaleString('zh-CN', {
							hour12: false
						}).split('/');

						item.endtime = splite_end[1] + "." + splite_end[2].split(" ")[0]

						console.log("item =>", item)
					});
					console.log("res.data.data.list=>", res.data.data.list)
				} else {
					console.error('Fetch failed with response:', res.data);
				}
			})
			// console.log("userInfo=>", userInfo);
			console.log("onShow");
			// this.fetchActivateList();

			//加载测试数据
			this.testData();
		},

		onLoad() {
			console.log("onLoad");

		},
		methods: {
			startRun() {
				console.log("startRun")
				this.startGetLocation()

			},
			stopRun() {
				console.log("stopRun");
				this.$refs.myMap.clearData(); // 调用子组件的清空方法

				console.log("Sending data to backend...", this.points);
				this.points = [];
				uni.stopLocationUpdate({
					success: res => console.log('开启小程序接收位置消息成功'),
					fail: err => console.error('开启小程序接收位置消息失败：', err),
					complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
				});
			},
			pauseRun() {
				console.log("pauseRun")
				uni.stopLocationUpdate({
					success: res => console.log('开启小程序接收位置消息成功'),
					fail: err => console.error('开启小程序接收位置消息失败：', err),
					complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
				});
			},

			tabSelect(e) {
				const index = e.currentTarget.dataset.id;
				this.TabCur107 = index;
				// 根据选中的 Tab 加载不同的数据
				this.loadDataForTab(index);
			},

			loadDataForTab(index) {
				console.log('加载数据 for tab:', index);
				if (index == 1) {
					this.startGetLocation()
					this.switchGPS = true;
				} else {
					if (this.switchGPS) {
						//结束GPS
						uni.stopLocationUpdate({
							success: res => console.log('开启小程序接收位置消息成功'),
							fail: err => console.error('开启小程序接收位置消息失败：', err),
							complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
						});
						this.switchGPS = false
					}

				}
			},
			onShareAppMessage(res) {
				return {
					path: this.share(),
					title: `请快来帮我砍一刀${this.bargainDetail.goodsName}`,
				};
			},
			testData() {
				console.log("测试用");
				// 这里均为测试开发用
				this.activateList.push({
					"title": "测试数据1",
					"url": "https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg"
				}, {
					"title": "测试数据1",
					"url": "https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg"
				}, {
					"title": "测试数据1",
					"url": "https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg"
				}, {
					"title": "测试数据1",
					"url": "https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg"
				});
			},
			changePage(ID, state) {
				console.log("hello world,ID state =>", ID, state)
				uni.navigateTo({
					url: `/main/run/activate?acitvate=${ID}&state=${state}`
				});
			},
			startGetLocation: function() {
				let that = this;
				uni.startLocationUpdate({
					success: res => {
						uni.onLocationChange(function(res2) {
							uni.showToast({
								title: '经度：' + res2.longitude + '纬度：' + res2.latitude +
									"速度 (m/s)" + res2.speed + "精确:" + res2.accuracy,
								icon: 'none',
							});
							let newPoint = {
								latitude: res2.latitude,
								longitude: res2.longitude,
								speed: res2.speed
							};
							console.log(newPoint)
							that.points.push(newPoint);
							// 动态更新地图轨迹
							// that.setDateByPoints(that.points);

						});
					},
					fail: err => {
						uni.showToast({
							title: err,
							icon: 'none',
						});
					},
					complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
				});
			},

		},

	}
</script>


<style lang="scss" scoped>
	@import "./activate.scss";

	$w_94: 94%;

	.layout {
		padding: 8px 0;
		background: #f9f9f9;
	}

	.selected-title {
		>h4 {
			font-size: 30rpx;
			color: #000 !important;
		}

		>view {
			font-weight: bold;

		}
	}

	.goods-cell-title {
		background: #f9f9f9;
		padding: 10px;
		transition: 0.35s;
		display: flex;
		float: left;

		>.goods-item-title {
			flex: 1;
			text-align: center;

			>h4 {
				font-size: 32rpx;
			}

			>view {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 50%;
		height: 40vw;
		margin-bottom: 10px;
		border-radius: 0.4em;
		overflow: hidden;
	}

	.goods-img {
		position: relative;
		margin: 0 auto;
		// width: 100%;
		height: 40%;
		width: $w_94;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
	}

	.goods-desc {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		width: $w_94;
		background: #fff;
		padding: 8rpx 0 8rpx 8rpx;
		margin: 0 auto;

		>.goods-title {
			font-size: 24rpx;
			height: 67rpx;
			display: -webkit-box;
			font-weight: 500;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		>.goods-bottom {
			display: flex;
			font-weight: bold;

			>.goods-price {
				line-height: 2;


				>span {
					font-size: 42rpx;
				}
			}
		}
	}
</style>